<template>
  <div :style="'width:'+attr.width+'px;height:'+attr.height+'px;'" class="content">
    <div v-if="content.length != 0">
      <div v-for="(item,index) in content" :key="index">
        <baseContainer :list="item" v-if="item.name == 'base-container'" />
        <div v-if="item.name == 'text'">文本</div>
        <navBar :list="item" v-if="item.name == 'navBar'" view></navBar>
      </div>
    </div>
  </div>
</template>

<script>
import baseContainer from 'components/base-container'
import navBar from 'components/navBar'
import content from '../utils/content.json'
console.log("content",content)

export default {
  components:{
    baseContainer,
    navBar
  },
  data() {
    return {
      content
    }
  },
  methods: {

  },
  computed:{
    attr(){
      return this.$store.state.drawing.attr
    }
  }
}
</script>

<style scoped>
  .content{
    background-color: #ffffff;
    box-shadow: 0 0 4px 0 rgb(29 31 37 / 18%);
  }
</style>